<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { usePolicyShow } from '@fl/api/fit-old-api'
import { cloneDeep } from 'lodash-es'

import addOrEditBox from './component/addOrEdit.vue'

const route = useRoute()
const _id = route.params?.id as string
const id = ref(_id ?? '')

const { go } = useRouter()

const editVisible = ref(false)
const editId = ref('')

const initialState = {
    city: '',
    code: '',
    content: '',
    district: '',
    isDeleted: 0,
    level: '',
    province: '',
    sortNo: 0,
    url: '',
}
const detail = ref(cloneDeep(initialState))

const { data, isLoading } = usePolicyShow(id)
watchEffect(() => {
    if (data.value) {
        detail.value = {
            ...data.value,
        }
    }
})

const TextDict = {
    0: '正常上架',
    1: '下架',
    2: '删除',
}
const TypeDict = {
    0: 'success',
    1: 'info',
    2: 'warning',
}

// 去编辑
function goToEdit() {
    editVisible.value = true
    editId.value = id.value
}

function goBack() {
    go(-1)
}

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 8,
        },
        label: '省',
        labelWidth: '40px',
        prop: 'province',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '市',
        labelWidth: '40px',
        prop: 'city',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '区',
        labelWidth: '40px',
        prop: 'district',
        valueType: 'text',
    },
    {
        label: '政策文件内容',
        labelWidth: '110px',
        prop: 'content',
        valueType: 'text',
    },
    {
        label: '上下架',
        labelWidth: '70px',
        prop: 'isDeleted',
        valueType: 'text',
    },
    {
        label: '排序号',
        labelWidth: '70px',
        prop: 'sortNo',
        valueType: 'text',
    },
]
</script>

<template>
    <ElCard shadow="never">
        <ElSkeleton v-if="isLoading"
                    :rows="5"
        />

        <template v-else>
            <div style="margin:20px 40px;">
                <PlusForm v-model="detail"
                          :columns="columns"
                          :label-width="100"
                          :has-footer="false"
                >
                    <template #plus-field-isDeleted>
                        <ElTag :type="TypeDict[detail.isDeleted]">
                            {{ TextDict[detail.isDeleted] }}
                        </ElTag>
                    </template>

                    <template #plus-field-content>
                        <el-link v-if="detail.url"
                                 :href="detail.url"
                                 target="_blank"
                        >
                            {{ detail.url }}
                        </el-link>

                        <span v-else>
                            {{ '暂无' }}
                        </span>
                    </template>
                </PlusForm>
            </div>
        </template>

        <div class="mt40"
             style="text-align: center"
        >
            <el-button type="primary"
                       @click="goToEdit"
            >
                编辑
            </el-button>

            <el-button @click="goBack">
                返回列表
            </el-button>
        </div>
    </ElCard>

    <addOrEditBox v-model:visible="editVisible"
                  v-model:id="editId"
    />
</template>
